<template>
  <div class="mark-result-card" @click="toDetail">
    <MediaWrap class="audio-wrap" :url="instance.picture" :width="180" :height="180"></MediaWrap>
    <div class="result-body-card">
      <div class="result-text single-omit">{{ instance.patentName }}</div>
      <!-- <div class="operation-wrap">
        <a-button @click="handleTrans">转让</a-button>
        <a-button @click="handlePermit">许可</a-button>
      </div> -->
      <div class="operation-wrap">
        <div class="price" v-if="resultInstance.priceRange === -1">价格：面议</div>
        <div class="price" v-else>价格：{{resultInstance.priceRange}}</div>
        <a-button @click="handleTrans" :style="{backgroundColor: operationColor}">{{resultInstance.operationTypeStr}}</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import {viewResultInfo} from '@/api/tradingInfos'
import mixinsBackStack from '@/views/backstageSupport/mixins'

export default {
  mixins: [mixinsBackStack],
  props: {
    instance: Object
  },
  data() {
    return {
      resultInstance: {},
      operationColor: '',
      colorMap: {
        0: '#89C997', // 转让
        1: '#6582FF',  // 许可
        2: '#2279D2' // 质押
      }
    }
  },
  created() {
    this.resultInstance = {...this.instance}
    this.handlerResultMappings([this.resultInstance]) // 处理数据的映射关系
    this.operationColor = this.colorMap[this.resultInstance.operationType]
  },
  methods: {
    toDetail() {
      const { id } = this.instance
      viewResultInfo(id).then() 
      this.$router.push({ name: 'detailDeal', query: { id } })
    },
    handleTrans(e) {
      e.stopPropagation()
      // console.log('转让')
    },
    handlePermit(e) {
      e.stopPropagation()
      // console.log('许可')
    }
  }
}
</script>
